<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>市场</title>
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
	<link href="./css/mui.css" rel="stylesheet"/>
	<link href="./css/mui.min.css" rel="stylesheet"/>
	<link href="./css/mui-icons-extra.css" rel="stylesheet"/>
	<link href="./css/app.css" rel="stylesheet"/>
	<style type="text/css">
		.app-video-history {
			width: 50%;
			overflow: hidden;
		}
		.app-video-history-tag {
			width: 100%;
			position: relative; top: 0; left: 0;
		}
	</style>
</head>
<body>
	<!-- 头部TITLE -->
	<header class="app-header">
		<b>效果库</b>
		&nbsp; &nbsp; 
		<span onclick="jumpToMarketHistory()">足迹</span>
	</header>
	<!-- 头部TITLE -->
	
	<!-- 主体部分 -->
	<div class="app-video-bg" id="refresh">
	</div>
	<!-- 更多按钮 -->
	<p id="more"></p>
	<br><br>
	<!-- 主体部分 -->
	
	<!-- 底部菜单 -->
	<nav class="mui-bar mui-bar-tab">
		<a class="mui-tab-item" onclick="jumpToIndex()">
			<span class="mui-icon mui-icon-home"></span>
			<span class="mui-tab-label">首页</span>
		</a>
		<a class="mui-tab-item mui-active" onclick="jumpToMarket()">
			<span class="mui-icon mui-icon-download"></span>
			<span class="mui-tab-label">库</span>
		</a>
<!-- 		<a class="mui-tab-item" onclick="jumpToMarket()">
			<span class="mui-icon mui-icon-download"></span>
			<span class="mui-tab-label">广场</span>
		</a> -->
<!-- 		<a class="mui-tab-item" onclick="jumpToCamera()">
			<span class="mui-icon mui-icon-camera"></span>
			<span class="mui-tab-label">拍</span>
		</a> -->
<!-- 		<a class="mui-tab-item" onclick="jumpToChat()">
			<span class="mui-icon mui-icon mui-icon-chatbubble"></span>
			<span class="mui-tab-label">消息</span>
		</a> -->
		<a class="mui-tab-item" onclick="jumpToMy()">
			<span class="mui-icon mui-icon-contact"></span>
			<span class="mui-tab-label">我的</span>
		</a>
	</nav>
	<!-- 底部菜单 -->
</body>
</html>

<script src="./js/mui.js"></script>
<script src="./js/app.js"></script>
<script type="text/javascript">
	// 初始化
	mui.init({
		//下拉、上拉刷新
        pullRefresh: {
            container: "#refresh",
            down: { //下拉刷新
				style: "circle",
				height: 50,
				auto: true,
                contentrefresh: "视频正在加载...",
                contentnomore: '没有更多视频了',
                callback: async function () { 
					var sys = getSys();
					if (sys.day==0 || sys.appAccess=='') { //判断系统参数
						var sysNew = setSys(); //参数更新
						setTimeout(function(){
							jumpToMarket();
						}, 1000);
					} 
					getMarket();
					mui('#refresh').pullRefresh().endPulldownToRefresh();
                }
            },
            up: { //上拉加载
                height: 50, 
                auto: false, 
                contentrefresh: "更多视频正在加载...", 
                contentnomore: '没有更多数据了', 
                callback: async function () { 
					getMarket();
                }
            }
        }
    });
	// //自动加载
	// (function($, owner) {
	// 	getMarket(); //数据列表
	// }(mui, window.app = {}));
	// 获取数据
	function getMarket(){
		// mui.toast(sys.domain); 
		// return
		var sys = getSys();
		if (sys.day==0 || sys.appAccess=='') {
			mui.toast('参数错误',{ 
				duration:'long', type:'div',
			});
			return
		}
		var resList = getMarketCache(); //数据缓存
		// mui.toast(resList.list); return
		var idstr = resList.idstr;
		mui.ajax(sys.domain+'/app/stock/one',{
			data:{
				appAccess: sys.appAccess,
				idstr:idstr
			},
			dataType:'json', //服务器返回json格式数据
			type:'post', //HTTP请求类型
			timeout:10000, //超时时间设置为10秒
			headers:{'Content-Type':'application/x-www-form-urlencoded'}, 
			success:function(res){
				// mui.toast('code'+res.code); return
				var p = '';
				if (res.code!=0) {
					p = '<button type="button" class="mui-btn mui-btn-block noDataBtn">没有视频了</button>';
					mui("#more")[0].innerHTML = p;
					setTimeout(function(){
						jumpToMarketHistory();
					}, 2000);
					return
				}
				var v = res.data;
				// 显示一个
				var cw = document.documentElement.clientWidth; //屏幕宽度
				var ch = document.documentElement.clientHeight; //屏幕高度
				var h = '';
				var vheight = Math.round(cw * v.videoRatio);
				// var vheight = ch - 35;
				var vname = getStrLimitNum(v.videoName,20); //显示有限字数
				h += '<div class="app-video" style="height:'+vheight+'px;">';
				h += '<video poster="'+v.videoImg+'" type="video/mp4" name="media" height="'+vheight+'" controls="controls" autoplay="autoplay" loop class="app-video-tag"><source src="'+v.videoLink+'" type="video/mp4"></video>';
				h += '<div class="app-video-title">'+vname+'</div>';
				h += '<div class="app-video-menu">';
				h += '<span class="mui-icon-extra mui-icon-extra-heart-filled app-video-grey"></span>';
				h += '<div class="app-video-grey">0</div>';
				h += '<div style="height: 8px;"></div>';
				h += '<span class="mui-icon mui-icon-chat app-video-grey"></span>';
				h += '</div>';
				h += '</div>';
				mui("#refresh")[0].innerHTML = h;
				setMarketCache(v); //更新缓存
				// 继续下拉
				mui('#refresh').pullRefresh().endPullupToRefresh(false);
			},
			error:function(xhr,type,errorThrown){
				mui.toast('网络错误！',{ 
					duration:'short', type:'div',
				});
			}
		});
	}
	//获取数据缓存
	function getMarketCache(){
		var resList = cacheGet(marketList);
		if (!resList) {
			var list = new Array(),  //数据数组
				idstring = ''; //ID字符串集合
			return {
				// 数据数组
				list: list,
				// 历史ID集合
				idstr: idstring
			};
		}
		return resList;
	}
	/** 
	 * 设置数据缓存
	 * one 新数据一个
	 * */
	function setMarketCache(one){
		var resList = getMarketCache();
		var list = resList.list,  //数据数组
			idstring = resList.idstr; //历史ID字符串集合
		if (list.length==0) {
			idstring = one.videoId;
		} else {
			idstring = idstring+','+one.videoId;
		}
		list[list.length] = one;
		var marketNew = {
			// 数据数组
			list: list,
			// 历史ID字符串集合
			idstr: idstring,
		};
		cacheSet(marketList, marketNew);
	}
</script>